<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>4D Meshes</title>
    <link rel="stylesheet" href="light.css" />
  </head>
  <body>
    <noscript>
      <strong
        >niivue doesn't work properly without JavaScript enabled. Please enable
        it to continue.</strong
      >
    </noscript>
    <header>
      <label for="meshSlider">Timepoint</label>
      <input
        type="range"
        min="0"
        max="1"
        value="0"
        class="slider"
        id="meshSlider"
      />
      <label for="meshSlider2">Opacity</label>
      <input
        type="range"
        min="1"
        max="10"
        value="7"
        class="slider"
        id="meshSlider2"
      />
    </header>
    <main id="container">
      <canvas id="gl1"></canvas>
    </main>
    <footer>
      <label id="shaders">Shaders: </label>
    </footer>
  </body>
</html>
<script type="module">
  import * as niivue from "../dist/index.js";
  
  var slider = document.getElementById("meshSlider");
  slider.oninput = function () {
    nv1.setMeshLayerProperty(nv1.meshes[0].id, 0, "frame4D", this.value);
  };
  var slider2 = document.getElementById("meshSlider2");
  slider2.oninput = function () {
    nv1.setMeshLayerProperty(nv1.meshes[0].id, 0, "opacity", this.value * 0.1);
  };
  var nv1 = new niivue.Niivue({
    show3Dcrosshair: true,
    backColor: [0.9, 0.9, 1, 1],
  });
  nv1.setSliceType(nv1.sliceTypeRender);
  await nv1.attachTo("gl1");
  var meshLHLayersList1 = [
    {
      url: "../images/Human.colin.R.FUNCTIONAL.71723.func.gii",
      colormap: "rocket",
      opacity: 0.7,
    },
  ];
  nv1.loadMeshes([
    {
      url: "../images/Human.colin.Cerebral.R.VERY_INFLATED.71723.surf.gii",
      rgba255: [255, 255, 255, 255],
      layers: meshLHLayersList1,
    },
  ]);
  nv1.setClipPlane([-0.1, 270, 0]);
  let cmaps = nv1.meshShaderNames();
  let cmapEl = document.getElementById("shaders");
  for (let i = 0; i < cmaps.length; i++) {
    let btn = document.createElement("button");
    btn.innerHTML = cmaps[i];
    btn.onclick = function () {
      nv1.setMeshShader(nv1.meshes[0].id, cmaps[i]);
    };
    cmapEl.appendChild(btn);
  }
</script>
